<template>
  <div class="topu">
    <ul>
      <li></li>
    </ul>
    <div
      id="go-graph-diagram"
      style="width: 100%;height: 700px;border: 1px solid #d8d8d8;"
    ></div>
  </div>
</template>
<script>
import go from 'gojs'
let self = null
// var pathstring = 'M32 11.192c0 2.699-1.163 5.126-3.015 6.808h0.015l-10 10c-1 1-2 2-3 2s-2-1-3-2l-9.985-10c-1.852-1.682-3.015-4.109-3.015-6.808 0-5.077 4.116-9.192 9.192-9.192 2.699 0 5.126 1.163 6.808 3.015 1.682-1.852 4.109-3.015 6.808-3.015 5.077 0 9.192 4.116 9.192 9.192z'
// var pathstring = 'M924.4 162.8c-22.73 49.6-55.21 94.09-96.54 132.24a450 450 0 0 1-142.3 88.59q-19.23 7.51-39 13.28A223.68 223.68 0 0 1 736 576c0 123.71-100.29 224-224 224S288 699.71 288 576a223.68 223.68 0 0 1 89.44-179.09q-19.76-5.78-39-13.28A449.83 449.83 0 0 1 196.14 295c-41.33-38.11-73.81-82.6-96.54-132.2A388.22 388.22 0 0 1 64 0a32 32 0 0 1 64 0c0 93.54 39.62 181.62 111.55 248a386.32 386.32 0 0 0 122.16 76 417.48 417.48 0 0 0 300.58 0 386.32 386.32 0 0 0 122.16-76C856.38 181.62 896 93.54 896 0a32 32 0 0 1 64 0 388.22 388.22 0 0 1-35.6 162.8zM398.86 462.86A160 160 0 1 0 512 416a159 159 0 0 0-113.14 46.86z'
var pathstring = `M24.511 32l-24.511-14.104v-3.793l24.511 14.103v3.794z M24.511 32l24.511-14.104v-3.793l-24.511 14.103v3.794z M18.834 26.788l0.009-0.382-0.509-0.293-0.010 0.382-0.255-0.146-0.016 0.65 1.020 0.586 0.016-0.65-0.254-0.146z
                  M18.334 26.113l0.509 0.293-0.010 0.382 0.255 0.146-0.016 0.65-1.021-0.586 0.017-0.65 0.255 0.146 0.010-0.382zM18.266 25.992v0.119l-0.007 0.263-0.152-0.090-0.103-0.059v0.119l-0.016 0.65v0.042l0.037 0.021 1.123 0.645v-0.119l0.016-0.65v-0.041l-0.036-0.022-0.219-0.126 0.009-0.34v-0.042l-0.65-0.373z
                  M18.839 26.589l0.005-0.183-0.509-0.293-0.010 0.382-0.255-0.146-0.016 0.65 0.786-0.409z
                  M18.331 26.507l0.368-0.184-0.366-0.21-0.010 0.381 0.007 0.013z
                  M20.682 27.858l0.010-0.382-0.51-0.293-0.009 0.382-0.255-0.146-0.017 0.65 1.021 0.586 0.016-0.65-0.255-0.146z
                  M20.181 27.183l0.51 0.293-0.010 0.382 0.255 0.146-0.016 0.65-1.021-0.586 0.017-0.65 0.254 0.146 0.010-0.382zM20.114 27.062v0.119l-0.006 0.263-0.152-0.090-0.103-0.059v0.119l-0.017 0.65v0.042l0.037 0.021 1.123 0.645v-0.119l0.017-0.65v-0.042l-0.037-0.021-0.218-0.126 0.009-0.34v-0.042l-0.037-0.021-0.509-0.294-0.103-0.058z
                  M20.687 27.659l0.005-0.183-0.51-0.293-0.009 0.382-0.255-0.146-0.017 0.65 0.787-0.409z
                  M20.18 27.577l0.368-0.184-0.367-0.21-0.009 0.381 0.007 0.013z
                  M22.433 28.831l0.009-0.383-0.509-0.293-0.010 0.382-0.255-0.146-0.016 0.65 1.020 0.586 0.017-0.649-0.255-0.146z
                  M21.933 28.155l0.509 0.293-0.009 0.383 0.254 0.146-0.016 0.649-1.020-0.589 0.016-0.65 0.255 0.146 0.010-0.382zM21.864 28.032v0.119l-0.007 0.263-0.152-0.090-0.102-0.059v0.119l-0.016 0.65v0.042l1.159 0.667v-0.119l0.016-0.649v-0.042l-0.036-0.022-0.218-0.125 0.008-0.341v-0.036l-0.65-0.373z
                  M22.438 28.631l0.005-0.183-0.509-0.293-0.010 0.382-0.255-0.146-0.016 0.65 0.786-0.409z
                  M21.93 28.55l0.368-0.184-0.366-0.21-0.010 0.381 0.007 0.013z
                  M17.083 25.718l0.010-0.383-0.51-0.293-0.010 0.382-0.254-0.146-0.017 0.65 1.021 0.586 0.016-0.649-0.255-0.146z
                  M16.583 25.043l0.51 0.294-0.010 0.382 0.255 0.146-0.017 0.65-1.020-0.587 0.016-0.65 0.255 0.147 0.010-0.383zM16.515 24.922v0.119l-0.006 0.263-0.152-0.090-0.103-0.059v0.119l-0.017 0.65v0.042l0.037 0.022 1.123 0.645v-0.119l0.017-0.65v-0.042l-0.037-0.022-0.218-0.125 0.009-0.34v-0.042l-0.037-0.022-0.613-0.352z
                  M17.089 25.519l0.005-0.183-0.51-0.293-0.010 0.382-0.254-0.146-0.017 0.65 0.787-0.409z
                  M16.581 25.438l0.368-0.184-0.367-0.211-0.010 0.382 0.008 0.013z
                  M15.333 24.648l0.010-0.382-0.51-0.293-0.010 0.382-0.255-0.146-0.016 0.649 1.020 0.587 0.017-0.65-0.255-0.146z
                  M14.832 23.973l0.509 0.293-0.009 0.382 0.254 0.146-0.020 0.649-1.020-0.587 0.016-0.649 0.255 0.146 0.010-0.382zM14.76 23.851v0.119l-0.007 0.263-0.152-0.090-0.102-0.058v0.119l-0.016 0.649v0.042l0.036 0.022 1.123 0.645v-0.119l0.016-0.65v-0.042l-0.254-0.146 0.008-0.34v-0.042l-0.65-0.374z
                  M15.337 24.45l0.005-0.183-0.51-0.293-0.010 0.382-0.255-0.146-0.016 0.649 0.786-0.408z
                  M14.831 24.368l0.368-0.184-0.367-0.21-0.010 0.381 0.008 0.013z
                  M13.582 23.676l0.010-0.383-0.51-0.293-0.009 0.382-0.255-0.146-0.017 0.65 1.021 0.586 0.016-0.649-0.255-0.146z
                  M13.081 23l0.51 0.293-0.010 0.383 0.255 0.146-0.016 0.649-1.021-0.586 0.017-0.65 0.254 0.146 0.010-0.382zM13.014 22.88v0.119l-0.006 0.263-0.152-0.090-0.103-0.059v0.119l-0.017 0.65v0.042l0.037 0.021 1.123 0.646v-0.119l0.017-0.649v-0.042l-0.037-0.022-0.218-0.125 0.009-0.341v-0.042l-0.037-0.021-0.613-0.352z
                  M13.587 23.476l0.005-0.183-0.51-0.293-0.009 0.382-0.255-0.146-0.017 0.65 0.787-0.409z
                  M13.079 23.395l0.368-0.184-0.367-0.21-0.009 0.381 0.007 0.013z
                  M11.831 22.703l0.010-0.382-0.51-0.293-0.010 0.382-0.255-0.146-0.016 0.65 1.020 0.586 0.017-0.65-0.255-0.146z
                  M11.331 22.029l0.51 0.293-0.010 0.382 0.255 0.146-0.017 0.65-1.020-0.586 0.016-0.65 0.255 0.146 0.010-0.382zM11.262 21.908v0.119l-0.006 0.263-0.153-0.090-0.102-0.058v0.119l-0.016 0.65v0.042l1.16 0.666v-0.119l0.016-0.65v-0.042l-0.037-0.021-0.218-0.126 0.008-0.34v-0.042l-0.037-0.021-0.51-0.294-0.103-0.058z
                  M11.836 22.504l0.005-0.183-0.51-0.293-0.010 0.382-0.255-0.146-0.016 0.65 0.786-0.409z
                  M11.329 22.422l0.368-0.184-0.367-0.21-0.010 0.381 0.008 0.013z
                  M24.511 0l-24.511 14.107 24.511 14.107 24.511-14.107zM21.733 14.301l-2.869 0.531-0.022 0.012c-0.016 0.005-0.034 0.008-0.053 0.008-0.004 0-0.008-0-0.012-0l0.001 0c-0.183-0.013-0.35-0.069-0.495-0.158l0.005 0.003-4.583-2.638c-0.050-0.029-0.165-0.104-0.146-0.18 0.028-0.103 0.259-0.248 0.572-0.248 0.003-0 0.006-0 0.010-0 0.153 0 0.296 0.040 0.421 0.11l-0.004-0.002 4.438 2.563 2.575-0.464c0.083-0.021 0.179-0.033 0.277-0.034h0.001c0.252 0 0.41 0.1 0.417 0.197s-0.129 0.242-0.533 0.301zM28.402 19.773c-0.030 0.112-0.304 0.279-0.619 0.279v0c-0.004 0-0.009 0-0.014 0-0.116 0-0.225-0.030-0.319-0.082l0.003 0.002-4.583-2.638c-0.102-0.059-0.102-0.090-0.090-0.188l2.059-6.178-3.908-2.246 0.232 1.291c-0.001 0.063-0.028 0.119-0.071 0.159l-0 0c-0.122 0.13-0.373 0.221-0.61 0.221-0.118 0-0.397-0.025-0.49-0.252l-0.15-1.998-0.012-0.024c0-0.008 0-0.020 0.008-0.036 0.037-0.068 0.196-0.199 0.557-0.255l3.77-0.27c0.237 0 0.382 0.068 0.438 0.131 0.019 0.019 0.031 0.046 0.031 0.075 0 0.005-0 0.010-0.001 0.015l0-0.001c-0.019 0.14-0.279 0.301-0.638 0.315l-2.449 0.172 4.233 2.44c0.102 0.058 0.102 0.090 0.090 0.188l-2.059 6.178 4.493 2.588c0.052 0.031 0.112 0.071 0.098 0.115zM34.944 16.096c-0.117 0.229-0.377 0.275-0.527 0.282l-3.473-0.095c-0.41-0.005-0.539-0.117-0.539-0.171 0-0.11 0.27-0.311 0.703-0.311h0.034l1.634 0.051h0.583l-0.51-0.27-3.287-1.892-2.439 0.278h-0.075c-0.344 0-0.505-0.1-0.509-0.171s0.174-0.26 0.607-0.304l2.598-0.28h0.040c0.006-0 0.013-0 0.021-0 0.165 0 0.323 0.027 0.47 0.078l-0.010-0.003 3.704 2.133 0.295-1.328v-0.006c0.018-0.141 0.279-0.301 0.637-0.315h0.051c0.237 0 0.381 0.068 0.437 0.131 0.019 0.020 0.031 0.046 0.031 0.076 0 0.003-0 0.006-0 0.009l0-0z`
var geo_ = go.Geometry.parse(pathstring)
export default {
  data () {
    return {
      diagram: null,
      $: null
    }
  },
  mounted () {
    self = this
    // 初始化 Gojs 实例
    this.diagram = new go.Diagram('go-graph-diagram')
    this.$ = go.GraphObject.make
    this.setNodeStyle()
    this.setLinkStyle()
    this.setModel()

    // // 将图表在画布中居中显示
    this.diagram.initialContentAlignment = go.Spot.Center
    this.doubleTreeLayout(this.diagram)
    // // 操作支持ctrl+z、ctrl+Y 实现undo和redo
    // this.diagram.undoManager.isEnabled = true;
  },
  methods: {
    // 分开左右节点
    separatePartsByLayout (diagram, bottomParts, topParts) {
      var root = diagram.findNodeForKey('Root')
      if (root === null) return
      // 根节点由两个子树共享！
      bottomParts.add(root)
      topParts.add(root)
      // 查看根节点的所有直接子节点
      root.findTreeChildrenNodes().each(function (child) {
        // 这个子节点是朝什么方向成长的
        var dir = child.data.dir
        var coll = (dir === 'bottom') ? bottomParts : topParts
        // 从这个子节点开始添加整个子树
        coll.addAll(child.findTreeParts())
        // 并将根节点的链接添加到此子节点
        coll.add(child.findTreeParentLink())
      })
    },
    // 双层树展示
    doubleTreeLayout (diagram) {
      // Within this function override the definition of '$' from jQuery:
      diagram.startTransaction('Double Tree Layout')

      // 根据方向将节点和链接拆分为两组
      var bottomParts = new go.Set(/* go.Part */)
      var topParts = new go.Set(/* go.Part */)
      this.separatePartsByLayout(diagram, bottomParts, topParts)
      // 但是根节点将在两个集合中

      // 在节点和链接的不同子集上创建并执行两个树布局,每个方向一个,不移动根节点
      var layout1 =
        this.$(go.TreeLayout, {
          angle: 90,
          arrangement: go.TreeLayout.ArrangementFixedRoots,
          setsPortSpot: false
        })

      var layout2 =
        this.$(go.TreeLayout, {
          angle: 270,
          arrangement: go.TreeLayout.ArrangementFixedRoots,
          setsPortSpot: false
        })

      layout1.doLayout(bottomParts)
      layout2.doLayout(topParts)

      diagram.commitTransaction('Double Tree Layout')
    },
    // 设置 model
    setModel () {
      this.diagram.model = new go.TreeModel([
        // 这些节点数据是缩进的,但不是根据树中的深度嵌套的
        {
          text: '路由器',
          key: 'Root',
          color: 'pink',
          source: require('../assets/asset.png')
        },
        {
          key: 'bottom1',
          parent: 'Root',
          dir: 'bottom',
          color: '#fe5722',
          source: require('../assets/asset.png')
        },
        {
          key: 'leaf1',
          parent: 'bottom1',
          color: '#fe5722',
          source: require('../assets/asset.png')
        },
        {
          key: 'leaf2',
          parent: 'bottom1',
          color: '#fe5722',
          source: require('../assets/asset.png')
        },
        {
          key: 'bottom2',
          parent: 'bottom1',
          color: '#fe5722',
          source: require('../assets/asset.png')
        },
        {
          key: 'leaf3',
          parent: 'bottom2',
          color: '#fe5722',
          source: require('../assets/asset.png')
        },
        {
          key: 'leaf4',
          parent: 'leaf3',
          color: '#FEA200',
          source: require('../assets/asset.png')
        },
        {
          key: 'leaf5',
          parent: 'leaf3',
          color: '#FEA200',
          source: require('../assets/asset.png')
        },
        {
          key: 'leaf6',
          parent: 'leaf1',
          color: '#FEA200',
          source: require('../assets/asset.png')
        },
        {
          key: 'leaf4',
          parent: 'bottom2',
          color: '#fe5722',
          source: require('../assets/asset.png')
        },
        {
          key: 'top1',
          parent: 'Root',
          dir: 'top',
          color: 'green',
          source: require('../assets/asset.png')
        },
        {
          key: 'top2',
          parent: 'top1',
          color: 'green',
          source: require('../assets/asset.png')
        },
        {
          key: 'leaf5',
          parent: 'top2',
          color: 'green',
          source: require('../assets/asset.png')
        },
        {
          key: 'leaf6',
          parent: 'top2',
          color: 'green',
          source: require('../assets/logo.png')
        },
        {
          key: 'leaf7',
          parent: 'top2',
          color: 'green',
          source: require('../assets/asset.png')
        },
        {
          key: 'leaf8',
          parent: 'top1',
          color: 'green',
          source: require('../assets/asset.png')
        },
        {
          key: 'leaf9',
          parent: 'top1',
          color: 'green',
          source: require('../assets/asset.png')
        }
      ])
    },
    // 设置节点样式
    setNodeStyle () {
      // 定义节点
      this.diagram.nodeTemplate =
        this.$(go.Node, 'Auto',
          this.$(go.Shape, 'Circle', {
            fill: 'lightcoral',
            strokeWidth: 4,
            stroke: 'green',
            width: 60,
            height: 60
          },
          new go.Binding('fill', 'color')),
          this.$(go.Shape, {
            margin: 3,
            fill: 'white',
            stroke: 'blue',
            strokeWidth: 2,
            geometry: self.imageConverter()
          }
            // new go.Binding('geometry', 'geo', self.imageConverter()
          ),
          // 每个节点都有一个显示其图标名称的工具提示
          {
            toolTip: this.$('ToolTip', {
              'Border.stroke': 'gray',
              'Border.strokeWidth': 2
            },
            this.$(go.TextBlock, {
              margin: 8,
              stroke: 'gray',
              font: 'bold 16px sans-serif'
            },
            new go.Binding('text', 'geo')))
          }
        )
    },
    // 设置连线样式
    setLinkStyle () {
      this.diagram.linkTemplate =
        this.$(go.Link, go.Link.Orthogonal, // the whole link panel
          {
            selectable: false
          },
          this.$(go.Shape)) // the link shape
    },
    imageConverter () {
      console.log(123)
      // console.log(go.Geometry.parse('M0 0 Q0 0 50 50 Q90 70100 60 L110 60 L110 37 L155 42 L220 142', true))
      return geo_
    }
  }
}
</script>
<style lang="css">
.topu {
  position: relative;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  left: 1px;
  top: 1px;
  width: 400px;
  height: 400px;
  background-color: white;
  z-index: 3;
}
</style>
